/** imports */

import "zone.js";
import { CUSTOM_ELEMENTS_SCHEMA, Component, NgModule } from "@angular/core";
import { BrowserModule, platformBrowser } from "@angular/platform-browser";
// import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import {
  type Ng2StateDeclaration,
  UIRouterModule,
  UISref,
  UISrefActive,
  UIView,
} from "@uirouter/angular";

/** Components */

@Component({
  selector: "my-app",
  imports: [UIView, UISref, UISrefActive],
  styles: [".active { font-weight: bold } a + a { margin-left: .5em; }"],
  template: `
    <a uiSref="hello" uiSrefActive="active">Hello</a>
    <a uiSref="about" uiSrefActive="active">About</a>
    <!-- type broken -->
    <ui-view></ui-view>
  `,
})
export class App { }

/** States */

const helloState: Ng2StateDeclaration = {
  name: "hello",
  url: "/hello",
  loadComponent: () => import("./components/base").then((mod) => mod.Hello),
};
const aboutState: Ng2StateDeclaration = {
  name: "about",
  url: "/about",
  loadComponent: () => import("./components/base").then((mod) => mod.About),
};

/** Root Application NgModule */

@NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({ states: [helloState, aboutState], useHash: true }),
  ],
  bootstrap: [App],
})
class RootUIRouterAppModule { }

/** Angular bootstrap */

platformBrowser()
  .bootstrapModule(RootUIRouterAppModule)
  .then((ref) => {
    // Ensure Angular destroys itself on stackblitz hot reloads.
    // if (window.ngRef) {
    //   window.ngRef.destroy();
    // }
    // window.ngRef = ref;
    // Otherwise, log the boot error
  })
  .catch((err) => console.error(err));
